<template>
  <div class="home">
    <!-- 头部组件 -->
    <my-header v-model="text" @addText="addText"></my-header>
    <!-- 内容展示 -->
    <div class="content">
      <div class="left">
        <!-- 正在进行 -->
        <div class="ling">
          <div class="nav">
            <h2>正在进行...</h2>
            <span>{{lingNum}}</span>
          </div>
          <!-- 内容盒子 -->
        <div class="box">
            <my-list v-for="(item,i) in dataAll" :key="i" :data="item" :index="i" v-show="!item.check" @remove="remove"></my-list>
        </div>
        </div>
        <!-- 已完成 -->
        <div class="over">
          <div class="nav">
            <h2>已完成!!!</h2>
            <span>{{dataAll.length-lingNum}}</span>
          </div>
          <!-- 内容盒子 -->
           <div class="box">
             <my-list v-for="(item,i) in dataAll" :key="i" :data="item" :index="i" v-show="item.check" @remove="remove"></my-list>
           </div>
        </div>
      </div>
      <!-- 全部任务 -->
      <div class="right">
         <div class="nav">
            <h2>ALL 全部任务</h2>
            <span>{{dataAll.length}}</span>
          </div>
          <!-- 内容盒子 -->
         <div class="box">
            <my-list v-for="(item,i) in dataAll" :key="i" :index="i" :data="item" @remove="remove"></my-list>
         </div>
      </div>
    </div>
  </div>
</template>

<script>
import myHeader from "../components/myHeader.vue";
import myList from "../components/myList.vue";
export default {
  components: { myHeader, myList },
  data() {
    return {
      // 添加内容
      text: "",
      // 数据
      dataAll: []
    };
  },
  computed: {
    // 计算未完成数量
    lingNum() {
      let num = 0;
      this.dataAll.forEach(item => {
        if (!item.check) {
          num++;
        }
      });
      return num;
    }
  },
  methods: {
    // 添加
    addText() {
      if (this.text == "") return;
      let obj = {
        check: false,
        isText: false,
        text: this.text
      };
      this.dataAll.push(obj);
      this.text = "";
    },
    // 删除
    remove(i) {
      this.dataAll.splice(i, 1);
    }
  }
};
</script>



<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #f5f5f5;
}
.content {
  width: 100%;
  height: 635px;
  overflow: hidden;
  display: flex;
  background-color: #000;
  justify-content: space-between;
  .left,
  .right {
    width: 49%;
    height: 100%;
    background-color: #f5f5f5;
  }
  .right {
    overflow-y: scroll;
    .box {
      width: 100%;
      height: 90%;
      overflow-y: scroll;
    }
  }
  .left {
    .ling,
    .over {
      width: 100%;
      height: 50%;
      overflow-y: hidden;
    }
    .box {
      width: 100%;
      height: 83%;
      overflow-y: scroll;
    }
  }
  .nav {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    h2 {
      font-size: 20px;
    }
  }
}
</style>

